<template>
  <!-- 圈子点赞的人列表页面 -->
  <view class="main">
    <!-- 搜索框 -->
    <view class="top_s">
      <view class="left">
        <icon type="search" size="13" />
      </view>
      <view class="right">
        <input
          type="text"
          :value="is_input"
          placeholder="搜索"
          placeholder-style="color:rgba(153,153,153,1);font-size:24rpx"
          @confirm="handleInput"
          @input="handleInput1"
        />
      </view>
      <view class="end" v-if="is_input != ''" @click="handleClear">
        <icon type="clear" size="13" color="#000" />
      </view>
    </view>
    <!-- 空状态显示 -->
    <view class="wu_Huo" v-if="renList.length == 0">
      <image src="../../imges/wuhuodong.png" mode="aspectFill"></image>
      <text>暂无人点赞</text>
    </view>
    <!-- 点赞列表 -->
    <!-- 成员 -->
    <view class="child">
      <view class="list">
        <view class="item" v-for="(item, index) in renList" :key="index">
          <view class="left">
            <navigator
              :url="'/pages/index/personal?id=' + item.userId"
              class="one"
              hover-class="none"
            >
              <image :src="item.avatarUrl" mode="aspectFill"></image>
            </navigator>

            <view class="two">
              <view class="top">
                <text class="name">{{ item.realName }}</text>
                <text class="dec">{{ item.company }}</text>
                <text class="zhu" v-if="item.isAdmin == 1">圈主</text>
              </view>
              <view class="bottom">
                发帖&nbsp; {{ item.postCount }}
                <text class="xian"></text> 积分&nbsp; {{ item.integral }}
              </view>
            </view>
          </view>
          <!--<view class="right" @click="handleBtn">
						...
					</view> -->
        </view>
      </view>
    </view>
    <view class="zheZhao" @tap="quMask" v-if="is_mask">
      <view class="modal">
        <view class="header"> 提示 </view>
        <view class="text"> 是否前往APP，邀请好友参加活动？ </view>
        <view class="btn_">
          <view class="left" @tap="quMask"> 取消 </view>
          <view>
            <uni-link
              class="right"
              href="https://www.yiqilaiwang.com/h5openapp2/app.html"
              text="确认"
              showUnderLine="false"
              color="#0476FC"
            >
            </uni-link>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      is_input: "", //输入框
      is_mask: false, //去app的弹窗
      id: "",
      pageSize: 10,
      renList: [],
      bottom: false,
      noMore: false,
    };
  },
  onLoad(options) {
    // console.log(options)
    this.id = options.id;
    this.handleList();
  },
  onShow() {
    this.bottom = false;
  },
  onReachBottom() {
    uni.showLoading({
      title: "加载中",
    });
    this.bottom = true;
    this.pageSize = this.pageSize + 10;
    this.handleList(this.is_input);
  },
  onPullDownRefresh() {
    this.bottom = false;
    this.noMore = false;
    this.pageSize = 10;
    setTimeout(() => {
      this.handleList(this.is_input);
      uni.stopPullDownRefresh();
      uni.showToast({
        title: "刷新成功",
        duration: 1500,
        icon: "none",
      });
    }, 1000);
  },
  methods: {
    handleList(name) {
      //点赞的人
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/appUserThumbs/thumbsList",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            name: name,
            thumbsId: this.id,
            pageNumber: 1,
            pageSize: this.pageSize,
          },
        }).then((res) => {
          // console.log(res, '点赞的人')
          if (res.data.code == 200) {
            // this.findList = res.data.data
            this.renList = res.data.data.rows;

            if (res.data.data.total == 0) {
              uni.hideLoading();
              return false;
            }
            if (
              this.bottom &&
              this.renList.length >= res.data.data.total &&
              !this.noMore
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
              this.noMore = true;
              return false;
            }
            if (this.renList.length >= res.data.data.total && this.bottom) {
              uni.hideLoading();
              uni.showToast({
                title: "没有更多数据了",
                duration: 1000,
                icon: "none",
              });
            } else if (
              this.renList.length < res.data.data.total &&
              this.bottom &&
              this.renList.length != 0
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleInput1(e) {
      //输入事件
      this.is_input = e.detail.value;
    },
    handleClear() {
      //清除文本框
      this.is_input = "";
      this.bottom = false;
      this.handleList();
    },
    handleInput(e) {
      //失焦事件（执行调用）
      this.is_input = e.detail.value;
      this.bottom = false;
      this.handleList(this.is_input);
    },
    handleBtn() {
      //点击确定
      this.is_mask = true;
    },
    quMask() {
      this.is_mask = false;
    },
  },
};
</script>

<style lang="less" scoped>
.wu_Huo {
  margin-top: 300rpx;
  padding-bottom: 300rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  image {
    width: 320rpx;
    height: 260rpx;
  }

  text {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(136, 136, 136, 1);
    line-height: 37px;
  }
}

.main {
  border-top: 2rpx solid #ddddddff;
  padding: 20rpx 0;

  .zheZhao {
    position: fixed;
    z-index: 999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;

    .modal {
      position: relative;
      background-color: #fff;
      border-radius: 8rpx;
      width: 520rpx;
      height: 300rpx;
      box-sizing: border-box;
      padding-top: 30rpx;

      .header {
        width: 100%;
        text-align: center;
        font-size: 40rpx;
        font-family: PingFang SC;
        font-weight: bold;
      }

      .text {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(49, 49, 49, 1);
        width: 100%;
        text-align: center;
        margin-top: 30rpx;
      }

      .btn_ {
        position: absolute;
        bottom: 0;
        height: 85rpx;
        border-top: 2rpx solid #eee;
        width: 100%;
        display: flex;

        view {
          box-sizing: border-box;
          width: 50%;
          height: 85rpx;
          line-height: 85rpx;
          text-align: center;
          font-size: 36rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.4);

          .right {
            width: 100%;
            height: 100%;
          }
        }

        .left {
          border-right: 2rpx solid #eee;
          font-size: 29rpx;
        }
      }
    }
  }

  .top_s {
    margin: 0 auto;
    width: 686rpx;
    height: 70rpx;
    background: #fff;
    box-shadow: 0px 2prx 30rpx 0px rgba(0, 0, 0, 0.06);
    border-radius: 35rpx;
    display: flex;
    align-items: center;
    border: 2rpx solid #0000000f;
    padding: 0 22rpx;
    box-sizing: border-box;

    .left {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 6rpx;
    }

    .right {
      flex: 1;

      input {
        width: 100%;
        height: 100%;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
      }
    }

    .end {
      height: 100%;
      display: flex;
      align-items: center;
      width: 50rpx;
      justify-content: center;
    }
  }

  .child {
    padding: 0 32rpx;

    .item {
      padding: 23rpx 0;
      display: flex;
      justify-content: space-between;
      border-bottom: 2rpx solid rgba(238, 238, 238, 1);

      &:last-child {
        border-bottom: none;
      }

      .left {
        display: flex;

        .one {
          width: 74rpx;
          height: 74rpx;
          margin-right: 14rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        > .two {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 74rpx;

          > .top {
            margin-top: -6rpx;
            display: flex;

            .name {
              font-size: 28rpx;
              font-weight: 500;
              color: rgba(51, 51, 51, 1);
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
            }

            .dec {
              font-size: 22rpx;
              // font-family:PingFangSC-Regular,PingFang SC;
              font-weight: 400;
              color: rgba(136, 136, 136, 1);
              display: inline-block;
              margin-left: 15rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
            }

            .zhu {
              display: inline-block;
              width: 50rpx;
              height: 22rpx;
              background: linear-gradient(
                136deg,
                rgba(255, 197, 79, 1) 0%,
                rgba(255, 107, 79, 1) 100%
              );
              border-radius: 12rpx;
              line-height: 22rpx;
              text-align: center;
              font-size: 6rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
              margin-left: 16rpx;
            }
          }

          .bottom {
            margin-top: 7rpx;
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(70, 70, 70, 1);

            .xian {
              width: 2rpx;
              height: 12rpx;
              background: rgba(204, 204, 204, 1);
              display: inline-block;
              margin: 0 15rpx;
            }
          }
        }
      }
    }
  }
}
</style>
